import { Component } from "react";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import { Input } from "@mui/material";
class NewTodoDiglog extends Component {
  constructor() {
    super();
    this.state = {
      todo_title: "",
    };
  }
  componentDidMount() {
    console.log(this.todo_title);
  }
  handleClose() {
    console.log("onClose");
    this.props.onCancel();
  }
  handleComfired() {
    console.log("Comfired");
    this.props.onNewTodo({ todo_title: this.state.todo_title });
  }
  handleChange(e) {
    this.setState({ todo_title: e.target.value });
  }
  render() {
    const { open } = this.props;
    return (
      <Dialog
        open={open}
        onClose={this.handleClose.bind(this)}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">{"新建TODO"}</DialogTitle>
        <DialogContent>
          <Input onChange={this.handleChange.bind(this)} placeholder="标题" />
        </DialogContent>
        <DialogActions>
          <Button onClick={this.handleClose.bind(this)}>取消</Button>
          <Button onClick={this.handleComfired.bind(this)} autoFocus>
            确定
          </Button>
        </DialogActions>
      </Dialog>
    );
  }
}

export default NewTodoDiglog;
